<template>
  <div class="articlesItem">
    <div class="tabs-item" >
      <p @click="toArticledetails(art_id)">{{ title }}</p>
      <div v-if="images !== undefined" class="img">
        <img v-for="(item, index) in images" :key="index" :src="item" alt="" />
      </div>
      <span>
        <b class="o1">{{ aut_name }}</b>
        <b class="o2">{{ comm_count }}评论</b>
        <b class="o3">{{ pubdate }}</b>
        <i class="iconfont icon-guanbi" @click="showPopup"></i>
      </span>
      <van-popup v-model="show" round class="popup">
        <p @click="disLikes"><i class="iconfont icon-chaping"></i>不感兴趣</p>
        <p>
          <i class="icon-gou"></i>反馈垃圾内容
          <i class="iconfont icon-xiangyou" @click="showPopup2"></i>
        </p>
        <p @click="blacklists"><i class="iconfont icon-lajitong"></i>拉黑作者</p>
      </van-popup>
      <van-popup v-model="show2" class="popup2" round closeable>
        <p @click="jubao">其他问题</p>
        <p @click="jubao">标题夸张</p>
        <p @click="jubao">低俗色情</p>
        <p @click="jubao">错别字多</p>
      </van-popup>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
export default {
  data () {
    return {
      // 弹窗1
      show: false,
      // 弹窗2
      show2: false
    }
  },
  props: ['title', 'aut_name', 'comm_count', 'pubdate', 'images', 'art_id', 'aut_id'],
  methods: {
    showPopup () {
      this.show = true
    },
    showPopup2 () {
      this.show2 = true
      this.show = false
    },
    toArticledetails (artId) {
      this.$router.push('/home/articledetails?art_id=' + artId)
    },
    // 不感兴趣
    disLikes () {
      Toast({
        message: '感谢您的反馈'
      })
      this.show = false
    },
    // 拉黑作者
    blacklists () {
      Toast({
        message: '感谢您的反馈'
      })
      this.show = false
    },
    // 举报
    jubao () {
      Toast({
        message: '感谢您的反馈'
      })
      this.show2 = false
      this.show = false
    }
  }
}
</script>

<style lang="less">
.articlesItem {
  .tabs-item {
    margin-top: 22px;
    height: 120px;
    padding: 22px @p12 0;
    border-top: 1px solid #f8f9fa;
    font-size: 14px;
    p {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-weight: 700;
    }
    span {
      display: inline-block;
      margin-top: 5px;
      width: 100%;
      b {
        font-weight: 400;
        color: #a2a2a2;
        margin-right: 7px;
      }
      i {
        float: right;
      }
    }
    .img {
      width: 100%;
      height: 60px;
      img {
        display: inline-block;
        margin-left: 5px;
        width: 100px;
        height: 60px;
      }
    }
    .popup {
      height: 120px;
      width: 70%;
      p {
        margin: 0 @p12;
        line-height: 40px;
        i {
          padding-right: 5px;
        }
      }
      p:nth-child(2) {
        border-top: 1px solid #e5e5e5;
        border-bottom: 1px solid #e5e5e5;
        i:last-child {
          float: right;
        }
      }
    }
    .popup2 {
      height: 200px;
      width: 70%;
      padding: 20px 0;
      p {
        line-height: 40px;
        margin: 0 @p12;
        border-bottom: 1px solid #e5e5e5;
      }
    }
  }
}
</style>
